﻿define(function (require) {

    var AppFuncView = require('view/AppFuncView');

    return Backbone.View.extend({

        el: $("#app-set"),
        template: _.template($('#tpl-app-type').html()),

        events: {
            'click #app-type li': 'clickItem'
        },

        initialize: function () {
            _.bindAll(this, 'render', 'addOneAppFunc', 'clickItem');
            this.model.view = this;
        },

        firstTime: true,

        render: function () {
            $(this.el).find('#app-type').remove();
            $(this.el).append(this.template());
            this.model.each(this.addOneAppFunc);

            $($(this.el).find('#app-type li')[this.currentIndex]).addClass('current');
            $(this.el).find('#arrow')
                .css({ 'background-position-x': 40 + this.currentIndex * 82 });

            if (this.firstTime) {
                this.refreshAppFuncListCallback(this.model.models[0].get('TypeName'));
                this.currentIndex = 0;
                this.firstTime = false;
            }

            return this;
        },

        currentIndex: 0,

        clickItem: function (e) {
            var index = $(e.target).parents('li').data('index');
            this.currentIndex = index;
            this.render();

            var categoryName = this.model.models[index].get('TypeName');
            this.refreshAppFuncListCallback(categoryName);
        },

        addOneAppFunc: function (appFunc, index) {
            var appFuncView = new AppFuncView({ model: new AppFunc(appFunc) });
            var appFuncDom = appFuncView.render().el;
            $(appFuncDom).data('index', index);
            $(this.el).find("#app-type").append(appFuncDom);
        },

        refreshAppFuncListCallback: function (name) {
        }
    });
});